<template>
  <span class="customer-choose">
    <el-button type="primary" @click="handleChooseClient">选择客户</el-button>
    <Dialog v-if="visible" title="选择客户" :visible="visible" width="600px" @cancel="handleOnCancel" @confirm="handleOnConfirm">
      <el-form @submit.native.prevent>
        <el-form-item style="margin-bottom: 0;">
          <SearchInput v-if="visible" class="mb20" :params="params" clearable :on-input="handleOnInput" />
          <!-- :infinite="true" :load="getMore" -->
          <selected-list ref="selectedList" :multiple="multiple" source-type="json" :json-data="data" :value="checkedValue" wants-value="" @change="handleChange" />
          <!-- <selected-list :multiple="multiple" source-type="uri" :infinite="true" :params="{ name, ...params }" data-source-uri="/api/v1/panda/sale/customer/condition/sort/find" :value="checkedValue" wants-value="" @change="handleChange" /> -->
        </el-form-item>
      </el-form>
      <template v-slot:footerMessage>
        <div v-if="errorMsg" class="danger-color">
          {{ errorMsg }}
        </div>
      </template>
    </Dialog>
  </span>
</template>

<script>
import { SearchInput, SelectedList, Dialog } from "@monkey.do/monkey";
import { findPage } from "@/api/customerQuery/index";

export default {
  name: "ChooseButton",

  components: { SearchInput, SelectedList, Dialog },

  props: {
    params: {
      type: Object,
      default: () => ({}),
    },
    onCancel: {
      type: Function,
      default: () => {},
    },
    onConfirm: {
      type: Function,
      default: () => {},
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    planId: {
      type: String,
      default: '',
    },
    maxNumber: {
      type: [Number, String],
      default: 100,
    },
  },

  data() {
    return {
      data: [],
      checkedValue: null,
      value: [],
      values: [],
      visible: false,
      queryParams: {
        pageSize: 20,
        pageNum: 1,
      },
      name: '',
      total: 0,
      errorMsg: '',
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.selectedListScroller();
        }
      },
    },
  },
  methods: {
    getList() {
      // const payLoad = this.dataFormatter({ ...this.params, name: this.name, ...this.queryParams });
      const payload = { ...this.params, name: this.name, ...this.queryParams };
      findPage(payload).then(res => {
        if (res.statusCode === 600 && res.data.list) {
          this.data = this.data.concat(res.data.list);
          this.total = res.data.total;
        }
      });
    },
    getMore() {
      if (this.data.length === this.total) return this.msgError('没有更多了');
      this.queryParams.pageNum++;
      this.getList();
    },
    selectedListScroller() {
      const that = this;
      this.$nextTick(() => {
        const listContainer = this.$refs['selectedList'].$el;
        const container = listContainer.children[0];
        const listWrapper = container.children[0];
        listWrapper.onscroll = function({ target }) {
          const clientHeight = target.clientHeight; // 容器高度固定为367
          const scrollHeight = target.scrollHeight;
          const scrollTop = target.scrollTop;
          if (scrollHeight === scrollTop + clientHeight) {
            that.getMore();
          }
        };
      });
    },
    handleChooseClient() {
      if (this.disabled) return;
      this.visible = true;
      this.getList();
    },

    handleOnConfirm() {
      if (this.multiple) {
        if (this.value.length > this.maxNumber) {
          this.errorMsg = `最多允许选择${this.maxNumber}位客户`;
          return;
        } else {
          this.errorMsg = '';
        }
        this.$emit("confirm", this.value || []);
      } else {
        this.$emit("confirm", this.value || []);
      }
      this.handleOnCancel();
    },

    handleOnCancel() {
      this.visible = false;
      this.value = {};
      this.active = "";
      this.queryParams.pageNum = 1;
      this.data = [];
      this.onCancel();
      this.name = "";
      this.errorMsg = '';
    },

    handleCustomerClick(value) {
      this.value = value;
    },

    handleOnInput(value) {
      this.data = [];
      this.name = value || undefined;
      this.queryParams.pageNum = 1;
      this.getList();
    },

    handleChange(value) {
      this.value = value;
      this.checkedvalue = value.map(item => item.id);
    },
  },
};
</script>

<style lang="scss" scoped>
  .customer-choose {
    display: inline-block;
    .customer-list {
      margin-top: 5px;
    }
  }
</style>
